<template>
  <div class="px-[16px] pt-[16px] bg-[var(--base-color)] rounded-[8px] mt-[8px] pb-[16px]">
    <FormTitle title="申报要素" />
    <vxe-grid v-bind="tableOptions" max-height="300px"> </vxe-grid>
  </div>
</template>

<script setup>
import FormTitle from "@/components/Form/FormTitle.vue";
import { performOperation } from "@/utils/currencyHelper.js";
const props = defineProps({
  data: { type: Object, default: () => {} },
});
const tableOptions = reactive({
  round: true,
  columnConfig: {
    resizable: true,
  },
  data: [],
  columns: [
    {
      title: "序号",
      width: 50,
      field: "xno",
    },
    {
      title: "品名",
      minWidth: 150,
      field: "declare_name",
    },
    {
      title: "海关HS编码",
      minWidth: 180,
      field: "hs_code",
    },
    // {
    //   title: "检疫附加码",
    //   minWidth: 180,
    //   field: "quarantine_add_code",
    // },

    {
      title: "数量及单位",
      minWidth: 180,
      field: "quarantine_add_code",
      slots: {
        default: ({ row }) =>
          `${row.goods_nums || "-"}/${row.goods_unit || "-"}`,
      },
    },
    {
      title: "单价/总价/币制",
      minWidth: 180,
      field: "quarantine_add_code",
      slots: {
        // default:({row}) =>  `${row.goods_price||'-'}/${row.total_amount||'-'}/${row.currency||'-'}`,
        default: ({ row }) =>
          `${row.pre_price}/${row.pre_total_amount}/${row.pre_currency || "-"}`,
      },
    },

    {
      title: "品牌",
      minWidth: 160,
      field: "brand",
    },
    {
      title: "型号",
      minWidth: 160,
      field: "model",
      cellRender: { name: "arrMap" },
    },
    {
      title: "品牌类型",
      width: 160,
      field: "brand_type",
    },
    {
      title: "申报要素",
      width: 160,
      field: "declare_elements",
    },
  ],
});
watch(
  () => props.data,
  (val) => {
    if (val) {
      tableOptions.data = val;
    }
  }
);
const dataInfo = inject("currencyAndRate");
watch(
  () => dataInfo.value,
  (val) => {
    const { currency, exchange_rate = 1 } = val;
    if (!currency) return;
    let tableData = JSON.parse(JSON.stringify(tableOptions.data));
    tableData.forEach((item) => {
      const { goods_price, goods_nums } = item;
      item.pre_currency = currency;
      item.pre_price = performOperation(
        "divide",
        goods_price,
        exchange_rate
      ).value;
      item.pre_total_amount = performOperation(
        "multiply",
        item.pre_price,
        goods_nums
      ).value;
    });
    tableOptions.data = tableData;
  },
  {
    deep: true,
  }
);
</script>

<style lang="scss" scoped></style>
